<template>
  <el-container>
      <el-header>
        <h3>添加教练</h3>
      </el-header>
      <el-main>
        <el-form ref="form" :rules="rule" :model="form" label-position="right" label-width="280px">
          <el-form-item label="姓名:" prop="coach_name">
            <el-input type="text" v-model="form.coach_name" placeholder="请输入教练名字"></el-input>
          </el-form-item>

          <el-form-item label="手机号:" prop="coach_mobile">
            <el-input type="number" v-model.number="form.coach_mobile" placeholder="请输入教练手机号"></el-input>
          </el-form-item>

          <el-form-item label="教练年龄:" prop="coach_age">
            <el-input type="number" v-model.number="form.coach_age" ></el-input>
          </el-form-item>

          <el-form-item label="教练教龄:" prop="coach_teach_age">
            <el-input type="number" v-model.number="form.coach_teach_age"></el-input>
          </el-form-item>
          <el-form-item>
            <el-link type="success" icon="el-icon-plus" :underline="false" @click.prevent="jumpCoachAdd">批量添加教练信息</el-link>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-edit" @click.prevent="add">添加</el-button>
          </el-form-item>
        </el-form>
        <el-dialog
        title="批量导入教练信息"
        :visible.sync="show"
        center
        width="20%"
        >
            <el-upload
              class="upload-demo"
              ref="upload"
              action="https://huaxin.ioboo.cn/admin/multiAddCoach"
              :auto-upload="false"
              :file-list="fileList"
              :limit="1"
              :on-change="beforeUpload"
              :headers="headers"
              :on-success="callBack"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click.prevent="submitUpload">上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">只能上传xls文件，且不超过1M</div>
            </el-upload>
        </el-dialog>
      </el-main>
  </el-container>
</template>

<script>
  import {checkMobile, addCoach} from '@/api/coach'
  import {getToken} from '@/utils/auth'
    export default {
        name: "add",
        inject: ['reload'],
        data () {
            const checkTelephone = (rule, value, callback) => {
                var pattern = /^1\d{10}$/;
                if (!pattern.test(value)){
                    callback(new Error('手机号码不正确'));
                } else {
                    callback();
                }
            };
            const checkUser = (rule, value, callback) => {
                checkMobile({mobile: value}).then(response => {
                    callback();
                }).catch( err => {
                    callback(new Error(err));
                })
            };
            return {
                form: {
                    coach_name: '',
                    coach_mobile: '',
                    coach_age: '',
                    coach_teach_age: ''
                },
                rule: {
                    coach_name: [
                        {required: true, message: '教练名字为必填项', trigger: 'blur'},
                        {min: 2, message: '名字字符长度最少两位', trigger: ['blur','change']}
                    ],
                    coach_mobile: [
                        {required: true, message: '手机号码为必填项', trigger: 'blur'},
                        {validator: checkTelephone, message: '手机号码由11位数字组成', trigger:  ['blur','change']},
                        {validator: checkUser, message: '手机号码已经被使用',trigger: ['blur','change']}
                    ],
                    coach_age: [
                        {required: true, message: '教练年龄是必填项', trigger: 'blur'},
                        {type: 'number', message: '教练年龄是数字', trigger: ['blur','change']}
                    ],
                    coach_teach_age: [
                        {required: true, message: '教练教学年龄为必填项', trigger: 'blur'},
                        {type: 'number', message: '教学年龄为数字', trigger: ['blur','change']}
                    ]
                },
                loading: false,
                show: false,
                headers: {
                    Authorization: getToken()
                },
                fileList: [],
            };
        },
        methods: {
            add () {
              this.$refs.form.validate(valid => {
                  if (!valid) {
                      return false;
                  }
                  this.loading = true;
                  addCoach(this.form).then(response => {
                    this.$message.success(response.msg);
                    this.$router.push({path: '/coach/list'});
                  }).catch( err => {

                  })
              });
            },
            jumpCoachAdd () {
                this.show = true;
            },
            submitUpload () {
                return this.$refs.upload.submit();
            },
            beforeUpload (file,fileList) {
                var white_list = [
                    'application/wps-office.xlsx',
                    'application/wps-office.xls'
                ];
                var max_size = 1024; //1024 kb => 1M
                var current_size = file.size / 1024;
                //校验文件大小
                if (current_size >= max_size) {
                    this.$refs.upload.clearFiles();
                    this.$notify.error('xls文件超过了1M大小!');
                    return false;
                }
                //校验文件类型
                if (!white_list.includes(file.raw.type)) {
                    this.$refs.upload.clearFiles();
                    this.$notify.error('只允许上传xls、xlsx文件类型文件');
                    return false;
                }
            },
            callBack(response, file, fileList) {
                if (response.code == 200) {
                    this.$message.success(response.msg);
                    this.show = false;
                    this.$router.push({path: '/coach/list'});
                } else if (response.code == 500) {
                    this.$message.error(response.msg);
                    this.$refs.upload.clearFiles();
                }
            }
        }
    }
</script>

<style scoped>
  .el-container {
    width: 60%;
    max-width: 100%;
    overflow: hidden;
    margin: 10px auto;
    border: 1px solid #F2F6FC;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

  .el-header {
    text-align: center;
  }
  .el-header h3 {
    font-size: 20px;
    height: 20px;
    line-height: 20px;
  }

  .el-main .el-form .el-input {
    width: 50%;
  }

</style>
